<template>
  <div class="we_component" :style="{textAlign:data.align}">
    <a v-if="data.url" class="we_btn" :href="`${data.url}?${Math.random()}`" :style="style">{{data.content}}</a>
    <a v-else class="we_btn" :style="style">{{data.content}}</a>
  </div>
</template>
<script>
  export default {
    props: ['data'],
    computed: {
      style () {
        return {
          width: this.data.size === 'small' ? '60px' : this.data.size === 'medium' ? '120px' : '200px',
          boxShadow: this.data.shadow ? '0 2px 4px #888' : '',
          background: this.data.background,
          borderRadius: this.data.borderRadius ? '4px' : 0,
          borderWidth: this.data.borderWidth + 'px',
          borderStyle: 'solid',
          borderColor: this.data.borderColor,
          fontFamily: this.data.fontFamily,
          fontWeight: this.data.fontWeight,
          fontSize: this.data.fontSize + 'px',
          color: this.data.fontColor
        }
      }
    }
  }
</script>
